<template>
<div class="reying">
   <div v-for="item in reyingList" :key="item.id" class="movie">
     <router-link :to="'/item/'+item.id">
      <div class="myImg">
        <img :src="item.img" alt="" />
      </div>
      <div class="right">
        <div>{{ item.nm }}</div>
        <div>
          观众点评 <span>{{ item.sc }}</span>
        </div>
        <div>主演{{ item.star }}</div>
        <div>{{ item.showInfo }}</div>
      </div>
      <div class="r2">
        <div v-show="item.globalReleased">购票</div>
        <div v-show="!item.globalReleased">预售</div>
      </div>
      </router-link>
    </div>
    </div>
</template>

<script>
export default {
name:'reying',
props:["reyingList"]
}
</script>

<style scoped>

.reying{
      background: white;
}
.movie {
  height: 100px;
  margin-top: 10px;
  display: flex;
  justify-content: left;

}
a{
  display: flex;
}
.myImg {
  width: 70px;
  height: 100%;
  margin-left: 14px;
}
.right {
  display: flex;
  height: 100%;
  flex-direction: column;
  /* margin: auto 0; */
  margin-left: 10px;
  width: 202px;
  border-bottom: 1px solid #bbb;
}
.right > div:nth-of-type(1) {
  font-size: 17px;
  font-weight: 700;
  color: black;
  margin-bottom: 7px;
  margin-top: 0;
}
.right > div {
  color: #666;
  font-size: 13px;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.right > div:nth-of-type(2) {
  margin-top: 0;
}
.right > div:nth-of-type(2) > span {
  color: #faaf00;
  font-weight: 700;
  font-size: 15px;
}
.r2 {
  height: 100%;
  width: 47px;
  height: 100%;
  border-bottom: 1px solid #bbb;
  display: flex;
  align-items: center;
}
.r2 > div:nth-of-type(1) {
  width: 47px;
  height: 27px;
  font-size: 12px;
  border-radius: 4px;
  text-align: center;
  line-height: 27px;
  background: skyblue;
  color: #fff;
}
.r2 > div:nth-of-type(2) {
  width: 47px;
  height: 27px;
  font-size: 12px;
  border-radius: 4px;
  text-align: center;
  line-height: 27px;
  background: red;
  color: #fff;
}
</style>